<template>
    <el-row>
        <el-col :span="24">
            <div class="center_class">
                <el-container class="home_container">
                    <!-- 头部区域-->
                    <!-- <el-header>
                        <div>
                            <img src="../assets/logo.png" alt=""/>
                            <el-row>
                                <el-col :span="2" :offset="0">
                                    <h2 class="span_class">个人中心</h2>
                                </el-col>
                            </el-row>
                        </div>
                    </el-header> -->
                    <!--页面主体区域-->
                    <el-container>
                        <!--侧边栏-->
                        <el-aside width="200px">
                            <el-menu text-color="#545C64" active-text-color="#545C64" router default-active="/userInfo">
                                <!--一级菜单-->
                                <el-submenu index="1">
                                    <!--以及菜单的模板区域-->
                                    <template slot="title">
                                        <!--图标-->
                                        <i class="el-icon-menu"></i>
                                        <!--文本-->
                                        <span>个人中心</span>
                                    </template>
                                    <!--二级菜单-->
                                    <el-menu-item :index="'/'+ 'userInfo'">
                                        <template slot="title">
                                            <!--图标-->
                                            <i class="el-icon-user-solid"></i>
                                            <!--文本-->
                                            <span>我的信息</span>
                                        </template>
                                    </el-menu-item>
                                    <el-menu-item :index="'/'+ 'publishGoods2'" v-permission:create:commodity="permissionList">
                                        <template slot="title">
                                            <!--图标-->
                                            <i class="el-icon-document"></i>
                                            <!--文本-->
                                            <span>商品发布</span>
                                        </template>
                                    </el-menu-item>
                                    <el-menu-item :index="'/'+ 'publishDemand'" v-permission:create:demand="permissionList">
                                        <template slot="title">
                                            <!--图标-->
                                            <i class="el-icon-s-promotion"></i>
                                            <!--文本-->
                                            <span>需求发布</span>
                                        </template>
                                    </el-menu-item>
                                    <el-menu-item :index="'/'+ 'webView'">
                                        <template slot="title">
                                            <!--图标-->
                                            <i class="el-icon-s-platform"></i>
                                            <!--文本-->
                                            <span>Scada</span>
                                        </template>
                                    </el-menu-item>
                                    <el-menu-item :index="'/'+ 'programme'" v-permission:create:programme="permissionList">
                                        <template slot="title">
                                            <!--图标-->
                                            <i class="el-icon-document"></i>
                                            <!--文本-->
                                            <span>方案发布</span>
                                        </template>
                                    </el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </el-aside>
                        <!--右侧内容-->
                        <el-main class="main_class">
                            <!--路由占位符-->
                            <router-view></router-view>
                        </el-main>
                    </el-container>
                </el-container>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters('user', ['permissionList'])
    },
    methods: {
        logout () {
            window.sessionStorage.clear()
            this.$route.push('/login')
        }
    }
}
</script>

<style scoped>
  .home_container{
    height: 900px;
  }
  .span_class{
      width: 1200px;
      border-left: 2px solid #2b96f1;
      margin: 15px auto;
      font-size: 14px;
      text-indent: 10px;
  }
  /* .el-row{
      padding-left: 20px;
  } */
  .el-header {
    /*background-color: #F2F2F2;*/
    /*width: 1200px;*/
      /*margin: 15px 0px;*/
      /*font-size: 14px;*/
      /*text-indent: 10px;*/
    /*padding-left: 100px;*/
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    /*padding-left: 30px;*/
    align-items: center;
    color: #333333;
    font-size: 20px;
    border-radius: 2px;
  }
  .el-aside {
    background-color: #FFFFFF;
  }
  .el-main {
    /* overflow-y:hidden; */
    width: 960px;
    background-color: #F7F7F7;
  }
  .main_class{
    width: 1100px;
    height: 800px;
    background-color: #F7F7F7;
  }
  /* .center_class{
    width: 1200px;
  } */
</style>
